css
.flower {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 50px auto;
}

.petal {
    position: absolute;
    width: 60px;
    height: 150px;
    background: pink;
    border-radius: 50%;
    transform-origin: bottom center;
    margin-left: 200px;
}

.petal1 { transform: rotate(0deg); }
.petal2 { transform: rotate(90deg); }
.petal3 { transform: rotate(180deg); }
.petal4 { transform: rotate(270deg); }

/* 盛开效果 */
.petal.open {
    animation: bloom 4s forwards;
}

@keyframes bloom {
    50% { transform: scaleY(0.1); }
    100% { transform: scaleY(1); }
}